<style lang="less">

@import '../../styles/common.less';
@import '../../styles/table/table.less';

</style>

<template>

<div>
    <Row class="margin-top-10">
        <Col>
            <Card>
                <p slot="title" style="height:32px;line-height:32px;">
                    <Icon type="android-remove"></Icon>
                    分类管理
                </p>
                <Row>
                    <Col span='6' >
                        <Tree ref="tree" :data="catsData" :render="renderTree" @on-select-change="handleCat"></Tree>
                    </Col>
                    <Col span="18" class="padding-left-10">
                        <div>
                            {{'分类-'+this.selectedCats.name}}
                            <can-edit-table :tableLoading="loading" @on-change="handleChange" refs="table2" v-model="pageData" :columns-list="columns"></can-edit-table>
                        </div>
                    </Col>
                </Row>

            </Card>
        </Col>

    </Row>
</div>

</template>

<script>

import canEditTable from './components/canEditTable_cats.vue';
import columns from './components/columns_cats.js';
import formatDate from 'utils/time';
import {
  getCatsAll,
  addCats,
  delCats
} from 'api/lx/lxgoodscats/cats';
export default {
    name: 'editable-table',
    components: {
        canEditTable
    },
    data() {
        return {
            loading: false,
            modelLoading: false,
            page: 1,
            size: 10,
            columns: [],
            pageInfo: '',
            pageData: [],
            catsData:[
                    {
                        catId: 1,
                        title: '根目录',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-plus-empty',
                                            type: 'primary',
                                            size: 'small'
                                        }),
                                        style: {
                                            width: '52px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: []
                    }
                ],
            oldCatsData:[],
            buttonProps: {
                type: 'ghost',
                size: 'small',
            },
            newCats:{},
            selectedCats:{}
        };
    },
    methods: {
        initColumns() {
            this.columns = columns;
            this.initCats();
        },
        initCats() {
          this.loading = true;
          //清空
          this.catsData[0].children.splice(0,this.catsData[0].children.length);
          getCatsAll().then(data => {
            this.loading = false;
            if (data.status === 200) {
              this.oldCatsData = data.data;
              this.oldCatsData.forEach(item => {
                  item.title = item.name;
                  //item.expand = true;
                  item.children = new Array();
              });
              this.oldCatsData.forEach(item => {
                  if (item.pid != 0) {
                    this.oldCatsData.forEach(pItem => {
                        if (pItem.catId == item.pid) {
                          pItem.children.push(item);
                        }
                    });
                  }
                  if (item.pid == 1) {
                    this.catsData[0].children.push(item);
                  }
              });
            } else {
              this.$Message.error(data.message);
            }
          }).catch(error => {
              this.$Message.error('服务器异常' + error);
          });
            //console.error(this.catsData);
        },
        //ivu-tree-title-selected
        renderTree (h, { root, node, data }) {
                        return h('span', {
                            class: "ivu-tree-title",
                            style: {
                                display: 'inline-block',
                                width: '100%'
                            },
                            on: {
                              click: () => {
                                this.handleCat(data);
                              }
                            }
                        }, [
                            h('span', [
                                h('Icon', {
                                    props: {
                                        type: 'ios-paper-outline'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    }
                                }),
                                h('span', data.title)
                            ]),
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    float: 'right',
                                    marginRight: '32px'
                                }
                            }, [
                                h('Button', {
                                    props: Object.assign({}, this.buttonProps, {
                                        icon: 'ios-plus-empty'
                                    }),
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => {
                                          this.modelLoading = true;
                                          this.append(data)
                                        }
                                    }
                                }),
                                h('Button', {
                                    props: Object.assign({}, this.buttonProps, {
                                        icon: 'ios-minus-empty'
                                    }),
                                    on: {
                                        click: () => { this.remove(root, node, data) }
                                    }
                                })
                            ])
                        ]);
        },
        append (data) {
          this.newCats = {};
          this.$Modal.confirm({
                  render: (h) => {
                      return h('Input', {
                          props: {
                              value: this.newCats.name,
                              autofocus: true,
                              placeholder: '请输入新的分类名称...'
                          },
                          on: {
                              input: (val) => {
                                  this.newCats.name = val;
                              }
                          }
                      })
                  },
                  loading:this.modelLoading,
                  onOk: () => {
                      this.newCats.pid = data.catId;
                      addCats(this.newCats).then(data => {
                        this.modelLoading = false;
                        if (data.status === 200) {
                          this.$Message.info('新增成功！');
                          this.$Modal.remove();
                          this.initCats();
                        } else {
                          this.$Message.error(data.message);
                        }
                      }).catch(error => {
                          this.$Message.error('服务器异常' + error);
                      });

                  },
                  onCancel: () => {
                      this.modelLoading = false;
                  }
              });
            // const children = data.children || [];
            // children.push({
            //       title: 'appended node',
            //       expand: true
            // });
            // this.$set(data, 'children', children);
        },
        remove (root, node, data) {
          this.$Modal.confirm({
                            title: '删除分类',
                            content: '确定删除该分类吗？该分类下子分类也将被删除',
                            loading:this.modelLoading,
                            onOk: () => {
                                delCats(data.catId).then(data => {
                                  this.modelLoading = false;
                                  if (data.status === 200) {
                                    this.$Message.info('删除成功！');
                                    this.$Modal.remove();
                                    this.initCats();
                                  } else {
                                    this.$Message.error(data.message);
                                  }
                                }).catch(error => {
                                    this.$Message.error('服务器异常' + error);
                                });

                            },
                            onCancel: () => {
                                this.modelLoading = false;
                            }
                        });
          //
            // const parentKey = root.find(el => el === node).parent;
            // const parent = root.find(el => el.nodeKey === parentKey).node;
            // const index = parent.children.indexOf(data);
            // parent.children.splice(index, 1);
        },
        handleCat(data){
          console.error(data);
          this.selectedCats = data;
          this.pageData.splice(0,this.pageData.length);
          this.pageData.push(data);
        },
        handleChange (val, index) {
            this.$Message.success('修改成功');
            this.initCats();
        },
        ok() {
        },
        cancel() {
        }
    },
    created() {
        this.initColumns();
    }
};

</script>
